
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mtons UI</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../../dist/css/dashboard.css" rel="stylesheet">

<link href="../../theme/default/style.css" rel="stylesheet">

<script src="../../depends/jquery.min.js"></script>
</head>

<body>
	<div class="container-fluid">

		<div class="row">
			<h2 class="sub-header">Dialog</h2>

			<p>对话框是一种特殊类型的窗口中,可以有一个工具栏在顶部和底部的按钮栏。它只有一个一个关闭按钮, 可拖拽, 但是不可
			调整大小, 如果需要调整大小, 请使用 Window
			</p>
			<div class="table-responsive">
				<table class="table table-striped" style="width: 600px;">
					<tr>
						<th>方法</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>title</td>
						<td>标题文字</td>
					</tr>
					<tr>
						<td>content</td>
						<td>内容, 可接收的参数类型: 文本, jQuery对象</td>
					</tr>
					<tr>
						<td>buttons</td>
						<td>底部按钮数组, 例：[{text : 'ok', click : function () {alert('ok');}}]</td>
					</tr>
					<tr>
						<td>width</td>
						<td>对话框宽度, 参数为数字</td>
					</tr>
					<tr>
						<td>height</td>
						<td>对话框高度, 参数为数字</td>
					</tr>
					<tr>
						<td>position</td>
						<td>自定义位置, {top: 0, left: 0} 或   {right: 0, bottom: 0}</td>
					</tr>
					<tr>
						<td>modal</td>
						<td>是否使用遮罩, 默认 false</td>
					</tr>
					<tr>
						<td>pin</td>
						<td>是否随页面滚动, 默认 false</td>
					</tr>
					<tr>
						<td>timeout</td>
						<td>超时自动关闭, 默认 0, 即不自动关闭, 单位：毫秒</td>
					</tr>
					<tr>
						<td>draggable</td>
						<td>是否可以拖拽, 默认 true</td>
					</tr>
				</table>
			</div>
			
			<div>
				<h4>示例：</h4>
				<div>
					<button id="alert" class="but">alert</button>
					<button id="confirm" class="but">confirm</button>
					<button id="prompt" class="but">prompt</button>
					<button id="timeout" class="but">timeout</button>
					<button id="custom" class="but">custom</button>
				</div>
				<pre>
// 自定义Dialog
var dialog = new mtons.Dialog({
	content:'prompt',
	timeout: 2000
});

// alert
mtons.Dialog.alert({
	content:'alert',
	pin : true,
	onSure : function () {
		alert('onSure');
	}
});

// confirm
mtons.Dialog.confirm({
	content:'confirm?',
	modal : true,
	onSure : function () {
		mtons.Dialog.alert({
			content:'click sure',
			icon : 'success'
		});
	},
	onCancel : function () {
		alert('Alert: click cancel');
	}
});

// prompt
mtons.Dialog.prompt({
	content:'prompt',
	position : {right : '0', bottom : '0'}
});
				</pre>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../src/core.js"></script>
	<script type="text/javascript" src="../../src/drag.js"></script>
	<script type="text/javascript" src="../../src/dialog.js"></script>
	
	<script type="text/javascript">
	$(function(){
		$('#alert').click(function () {
			mtons.Dialog.alert({
				content:'alert',
				pin : true,
				onSure : function () {
					alert('onSure');
				}
			});
		});
		
		$('#confirm').click(function () {
			mtons.Dialog.confirm({
				content:'confirm?',
				modal : true,
				onSure : function () {
					mtons.Dialog.alert({
						content:'click sure',
						icon : 'success'
					});
				},
				onCancel : function () {
					alert('Alert: click cancel');
				}
			});
		});
		
		$('#prompt').click(function () {
			mtons.Dialog.prompt({
				content:'prompt',
				position : {right : '0', bottom : '0'}
			});
		});
		
		$('#timeout').click(function () {
			mtons.Dialog.prompt({
				content:'prompt',
				timeout: 2000
			});
		});
		
		$('#custom').click(function () {
			new mtons.Dialog({
				content:'prompt',
				timeout: 2000
			});
		});
		
	});
	</script>
</body>
</html>
